<template>
	<view class="order-item" :class="[type ? 'order-item-sell' : 'order-item-buy']" @click="handle">
		<view class="order-top">
      <text class="tags">{{ type ? '卖' : '买' }}</text>
      <text class="text text-color">{{ tokenType }}</text>
      <text class="text">/CNY</text>
      <text class="time">{{ time }}</text>
      <text class="status">{{ status }}</text>
    </view>
    <view class="order-info">
      <u-row>
        <u-col :span="7">
          <view class="o-left">
            <text class="text">价格</text>
            <text class="text">{{ price }}</text>
          </view>
        </u-col>
        <u-col :span="5"><text class="strong">{{ Number(price * number).toFixed(2) }}</text><text>CNY</text></u-col>
      </u-row>
      <u-row>
        <u-col :span="7">
          <view class="o-left">
            <text class="text">数量</text>
            <text class="text">{{ number }}</text>
          </view>
        </u-col>
        <u-col :span="5"><text>总金额</text></u-col>
      </u-row>
    </view>
	</view>
</template>

<script>
	export default {
    props: {
      type: {
        type: [Number, Boolean],
        default: 0
      },
      tokenType: {
        type: String,
        default: ''
      },
      price: {
        type: [String, Number],
        default: ''
      },
      status: {
        type: String,
        default: ''
      },
      time: {
        type: String,
        default: ''
      },
      number: {
        type: [String, Number],
        default: ''
      }
    },
		data() {
			return {
				
			};
		},
    methods: {
      handle () {
        this.$emit('click')
      }
    }
	}
</script>

<style lang="scss">
.order-item {
  margin-bottom: 20rpx;
  position: relative;
  border-bottom: 2rpx solid rgba($color: #fff, $alpha: 0.1);
}
.order-item-sell {
  .order-top {
    .tags {
      background-color: #F43530;
    }
    .text-color {
      color: #F43530;
    }
  }
}
.order-item-buy {
  .order-top {
    .tags {
      background-color: #00B26A;
    }
    .text-color {
      color: #00B26A;
    }
  }
}
.order-top {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  .tags {
    width: 60rpx;
    height: 40rpx;
    line-height: 40rpx;
    background-color: #ccc;
    color: #fff;
    text-align: center;
    margin-right: 16rpx;
  }
  .text {
    font-size: 28rpx;
    color: $text-color;
  }
  .time {
    font-size: 24rpx;
    color: $color-theme;
    margin-left: 10rpx;
  }
  .status {
    font-size: 24rpx;
    color: $text-color;
    margin-left: auto;
    margin-right: 30rpx;
  }
}
.order-info {
  font-size: 24rpx;
  color: $color-theme;
  padding: 20rpx 30rpx;
  line-height: 44rpx;
  .o-left {
    display: flex;
    border-right: 1rpx solid $uni-text-color-grey;
    .text {
      min-width: 80rpx;
    }
  }
  .strong {
    font-size: 32rpx;
    color: $text-color;
    font-weight: bold;
    margin-right: 10rpx;
  }
}
</style>
